<template>
  <div>
    <el-form ref="queryform" :model="queryform" label-width="80px" inline>
      <el-form-item label="收房合同编号">
        <el-input v-model="queryform.sfContractNo" placeholder="请输入收房合同编号" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="业主姓名">
        <el-input v-model="queryform.ownerName" placeholder="请输入业主姓名" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="小区名称">
        <el-input v-model="queryform.premiseName" placeholder="请输入小区名称" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <br>
      <el-form-item label="合同录入日期">
        <el-col :span="12">
          <el-date-picker v-model="queryform.start" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          :style="{width: '70%'}" placeholder="" clearable></el-date-picker>
        </el-col>
        <el-col :span="12">
          <el-date-picker v-model="queryform.end" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          :style="{width: '75%'}" placeholder="" clearable></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">清空</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="sfContractNo"
          label="合同编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="premiseName"
          label="小区"
          width="180">
        </el-table-column>
        <el-table-column
          prop="signUserMobile"
          label="电话"
          width="180">
        </el-table-column>
        <el-table-column
          prop="leaseStartTime"
          label="起租日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="leaseEndTime"
          label="结束日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="conInfoTime"
          label="录入日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="conAudTime"
          label="审核日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="ownerName"
          label="业主"
          width="180">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="操作人">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <!--<form id="uploadForm" action="javascript:void(0);" onsubmit="return false" method="post"  enctype ="multipart/form-data">
            <label style="color:#ffa800;font-weight:normal;width:150px;cursor:pointer">导入还款计划<input style="display:none" class='myfile' type="file" name="upfile" data-contractid='${vo.contractId}' data-outorderno='${vo.outOrderNo}' data-sfContractNo='${vo.sfContractNo}'></label>
          </form>-->
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryform.pageNum"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="this.queryform.pageSize"
        layout="prev,pager,next"
        :total="total">
      </el-pagination>
    </template>
  </div>
</template>

<script>
import {listContract} from "@/api/contract/contract";

export default {
  data() {
    return {
      queryform: {
        sfContractNo: undefined,
        ownerName: undefined,
        premiseName: undefined,
        start: null,
        end: null,
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      total: undefined,
    }
  },
  methods: {
    submitForm() {
      this.list();
    },
    resetForm() {
      this.queryform = {
        pageNum: 1,
        pageSize: 10
      };
    },
    list() {
      listContract(this.queryform).then(res => {
        console.log(res);
        this.tableData = res.msgData.list;
        this.total = res.msgData.total;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryform.pageSize = val;
      this.queryform.pageNum = 1;
      this.list();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryform.pageNum = val;
      this.list();
    }
  },
  created() {
    this.list();
  }
}
</script>

<style scoped>

</style>
